<?php $this->load->view('home/layout/header') ?>
<body style="background-color: #fff;">
<div id="apphelper">
    <header class="my-head flex">
        <div class="my-return">
            <a href="<?php echo site_url('home/ucenter/index'); ?>">
                <i class="iconfont icon-zuojiantou"></i>
            </a>
        </div>
        <div class="my-name">
            意见反馈
        </div>
    </header>
    <section class="width-max fankui">
        <div class="fankui-type">
            <ul class="flex">
                <li class="flex-1" v-on:click="selectType($event, 1)">使用不畅</li>
                <li class="flex-1 center-text" v-on:click="selectType($event, 2)">缺少内容</li>
                <li class="flex-1" v-on:click="selectType($event, 3)">宝贵建议</li>
            </ul>
        </div>
        <div class="write-content">
            <textarea v-model="content" placeholder="请描述你的问题和意见"></textarea>
            <div class="file-load">
                <ul class="ul-images over-flow">
                    <li v-for="(item, index) in images">
                        <img v-bind:src="item.img" class="item-image">
                        <span class="delete" v-on:click="showDelete(index)">
                            <i class="iconfont icon-cha"></i>
                        </span>
                    </li>
                    <li class="last">
                        <label class="click-upload">
                            <p class="add">
                                <i class="iconfont icon-jiahao"></i>
                            </p>
                            <input type="file" name="file" v-on:change="uploadImg" class="upload-hide" accept="image/*">
                        </label>
                    </li>
                </ul>
            </div>
            <div class="input-telephone">
                <input type="text" v-model="emailPhone" placeholder="请填写您的手机号或邮箱"/>
            </div>
        </div>
        <div class="buttom-submit">
            <button type="text" v-on:click="nextEvent" class="am-btn am-btn-primary am-btn-block">提交</button>
        </div>
    </section>
</div>
</body>
<?php $this->load->view('home/layout/footer') ?>
<script type="text/javascript">
    new Vue({
        el: '#apphelper',
        data: {
            emailPhone : '',
            content    : '',
            images     : [],
            uploads    : [],
            type       : 0
        },
        methods: {
            uploadImg: function (e) { // 上传图片
                var self = this;
                var obj = {};
                var i = 0;
                if (self.images.length <= 3) {
                    upLoadImg(e.currentTarget.files[0], function (res) {
                        obj.img = res.file_url;
                        self.images.push(obj);
                        self.uploads.push(res.save_path);
                        i++;
                    });
                } else {
                    alertMessage('最多只能上传4张图片');
                    //layer.msg('最多只能上传4张图片');
                }
            },
            showDelete: function (index) {
                var self = this;
                self.images.splice(index, 1);
                self.uploads.splice(index, 1);
            },
            selectType: function (event, type) {
                $(event.target).addClass('active').siblings().removeClass('active');
                this.type = type;
            },
            nextEvent: function (event) {
                var self = this;// 校验通过
                $.ajax({
                    url: hostUrl()+'ucenter/feedbackTo.html',
                    data: { // 后台需要什么 自己取
                        emailPhone  : self.emailPhone,
                        content     : self.content,
                        uploads     : self.uploads.join(','),
                        type        : self.type
                    },
                    type: 'post',
                    dataType: 'json',
                    beforeSend : function () {
                        $(event.target).attr('disabled','disabled').text('提交中');
                    },
                    success: function (res) {
                        if (res.status) { // 保存成功后的操作 待定
                            location.href = res.data.url;
                        } else {
                            alertMessage(res.msg);
                            //layer.msg(res.msg);
                        }
                        $(event.target).attr('disabled', false).text('提交');
                    },
                    error: function () {
                        alertMessage('网络错误');
                        $(event.target).attr('disabled', false).text('提交');
                    }
                });
            }
        }
    });
</script>